<template>
  <div class="layout-item-search-container">
    <Select size="small" clearable filterable style="width:150px" v-model="selectValue" placeholder="搜索画布中的布局块" @on-change="changeHandler">
      <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Tooltip content="扩展搜索" placement="bottom">
      <Button class="m-l-5px" size="small" type="default" @click="searchComponentWindowVisible = true"><Icon type="md-search" /></Button>
    </Tooltip>

    <Modal v-model="searchComponentWindowVisible"
           width="570"
           draggable
           sticky
           scrollable
           transfer
           :mask="false"
           title="扩展搜索" @on-visible-change="searchComponentWindowModalVisibleChangeHandler">
      <div style="width: 100%; overflow: hidden;">
        <Input enter-button clearable placeholder="输入组件名称搜索" v-model="searchInputValue"/>
        <div class="m-b-5px"></div>
        <Table border
               height="480"
               :highlight-row="true"
               size="small" :columns="searchComponentTableColumns" :data="options"></Table>
      </div>
      <div slot="footer">
        <Button @click="searchComponentWindowVisible = false">关闭</Button>
        <Button @click="closeModalAndClearSearchInputValue">关闭并清空搜索条件</Button>
      </div>
    </Modal>
  </div>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  import LayoutItemSearchExpandRow from './LayoutItemSearchExpandRow'

  export default {
    name: 'LayoutItemSearch',
    components: {
      // eslint-disable-next-line vue/no-unused-components
      LayoutItemSearchExpandRow
    },
    data() {
      return {
        selectValue: '',

        searchComponentWindowVisible: false,
        searchInputValue: '',
        searchComponentTableColumns: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(LayoutItemSearchExpandRow, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: '组件',
            key: 'label',
            width: '140'
          },
          {
            title: '组件ID',
            render: (h, params) => {
              if (params.row.componentId) {
                return h('div', [
                    h('span',{}, params.row.componentId),
                    h('Icon',{
                      props: {
                        type: 'md-copy'
                      },
                      style: {
                        marginLeft: '8px',
                        cursor: 'pointer'
                      },
                      on: {
                        click: () => {
                          this.copyText(params.row.componentId)
                        }
                      }
                    })
                ])
              }else {
                return h('span', {

                }, '布局块未绑定组件')
              }
            }
          },
          {
            title: '定位',
            width: 68,
            align: 'center',
            render: (h, params) => {
              return h('Button', {
                attrs: {
                  title: '定位组件所在位置'
                },
                props: {
                  icon: 'md-locate',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.locationComponent(params.row)
                  }
                }
              })

            }
          }
        ],
        searchComponentTableData: []
      }
    },
    mounted() {

    },
    methods: {
      changeHandler (value) {
        if (value) {
          this.$store.commit('designer/setCurrentSelectLayoutItemId', value)
          for (let i=0; i<this.layoutItems.length; i++) {
            if (this.layoutItems[i].id == value && this.layoutItems[i].component.id) {
              this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', 'NullForm');
              this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', this.layoutItems[i].component.name + 'Form');
              this.$store.commit('designer/setCurrentSelectGroupItemId', '');
              this.$store.commit('designer/setCurrentSelectGroupItemIds', []);
            }
          }
        }
      },

      locationComponent (rowData) {
        this.$store.commit('designer/setCurrentHoverLayoutItemId', rowData.value)
      },

      searchComponentWindowModalVisibleChangeHandler (val) {
        if(!val) {
          this.$store.commit('designer/setCurrentHoverLayoutItemId', '')
        }
      },

      closeModalAndClearSearchInputValue () {
        this.searchComponentWindowVisible = false
        this.$store.commit('designer/setCurrentHoverLayoutItemId', '')
        setTimeout(() => {
          this.searchInputValue = ''
        }, 1000)
      },

      copyText (cont) {
        this.$PnUtil.copyToClipboard(cont);
        this.$Message.success('文本【'+cont+'】复制成功')
      }
    },
    computed: {
      ...mapFields({
        layoutItems: 'pageMetadata.layout.layoutItems'
      }),
      options () {
        let allCompinfoObj = JSON.parse(localStorage.getItem('allCompinfoObj'));
        let opts = [];

        this.layoutItems.forEach(layoutItem => {
          if (layoutItem.component.id) {
            opts.push({
              label: layoutItem.aliasName ? layoutItem.aliasName : allCompinfoObj[layoutItem.component.name].alias_name,
              value: layoutItem.id,
              componentId: layoutItem.component.id
            })
          }
        });

        if (this.searchInputValue) {
          return opts.filter(o => {
            return o.label.indexOf(this.searchInputValue) > -1
          })
        }else {
          return opts
        }
      }
    }
  }
</script>

<style scoped>
  .layout-item-search-container {
    display: inline-block;
  }
  >>> .ivu-modal-body {
    padding: 5px;
  }
  >>> .ivu-table-expanded-cell {
    padding: 10px 10px 0px 10px;
  }
</style>
